<template>
<div class="container">
  <div class="top-bar">
    <div class="top-l" v-text="dep.branchName"></div>
    <div class="top-r">
      <router-link :to="{path:'/SelectDep',query:{productId:productId}}">更换</router-link>
    </div>
  </div>

  <div class="main">
  <div class="left-nav">
    <div class="nav" v-for="item in teams" @click="getMember(item.teamId)">
      <div class="nav-inner">
        <span v-text="item.teamName"></span>
      </div>
    </div>
    <!--
    <div class="nav" teamId="3">
      <div class="nav-inner">
        <span>团队名称</span>
      </div>
    </div> -->
  </div>

  <div class="right-container">
    <div class="p-wrap">

      <div class="p-box" 
        v-for="item in members"
        @click="tapMember(item.adviserId,item.adviserName)"
        >
        <div class="p-top flex">
          <div class="pic">
            <img :src="item.headPhotoUrl" alt="头像">
          </div>
          <div class="infos flex-1">
            <div class="name_btn">
              <div class="name" v-text="item.adviserName"></div>
              <div class="select">
                <a href="javascript:;" class="btn">选择</a>
              </div>
            </div>
            <div class="book">
              资格证书：{{item.certificateNum}}
            </div>
          </div>
        </div>
        <div class="des" v-text="item.briefInfo"></div>
      </div>


    </div>
    <!-- <div class="p-wrap hidden">111</div>
    <div class="p-wrap hidden">2222</div> -->
    <div class="empty" v-if="members.length==0">
      <img src="../assets/images/jttb@2x.png" alt="">
      <p>请选择团队</p>
    </div>
  </div>
  </div>

  <div class="none hidden" v-if="teams.length==0">
    <img src="../assets/images/info_icon@2x.png" alt="">
    <p>该营业部暂无可<br>签约的投顾</p>
  </div>

</div>
</template>

<script>
import Api from '@/service'
import Stores from '@/stores'
export default {
  name: 'Select',
  data () {
    return {
      productId: this.$route.query.productId,
      dep:{},
      teams:[],
      members:[]
    }
  }, 
  methods:{
    initPage(){
      let _self = this,
          _branchCode = _self.$route.query.branchCode;

      if(_branchCode){
        Api.sm.getTeam(_branchCode).then(function(response){
          if(response.data.status=="success"){
            _self.dep.branchName = _self.$route.query.branchName.replace(/<[^>]+>/g,"");
            _self.dep.branchCode = _branchCode;
            _self.teams = response.data.info;
            if(_self.teams.length==1){
              _self.getMember();
            }
          }else{
            console.log("getTeam接口请求出错！")
          }
        });
      }else{
        Api.sm.initSelect(_self.productId)
        .then(function(response){
          console.log(response.data.info)
          if(response.data.status=="success"){
            _self.dep = response.data.info.branchName;
            _self.teams = response.data.info.teamList;
            if(_self.teams.length==1){
              _self.getMember();
            }
          }else{
            console.log("initSelect接口请求出错！")
          }
        });
      }
    },
    getMember(teamId){
      let _self = this;
      console.log(Stores.state.riskInfo.productId,_self.dep.branchCode,teamId)

      Api.sm.getSelectMember(_self.productId,_self.dep.branchCode,teamId)
      .then(function(response){
        console.log(response.data.info)

        if(response.data.status =='success'){
          _self.members = response.data.info;
        }else{
          console.log("getSelectMember接口请求出错！");
        }
      });
    },
    tapMember(adviserId,adviserName){
      this.$router.push({path:'/AffirmOrder',query:{productId:this.productId,adviserId:adviserId,adviserName:adviserName}});
    }
  },
  created: function(){
    this.initPage();
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  background: #F5F8FA;
  overflow: hidden;
  box-sizing: border-box;
  .top-bar{
    width: 100%;
    height: calculateRem(60px);
    box-sizing: border-box;
    border-bottom: 1px solid #e0e4e8;
    background: white;
    padding: 0 calculateRem(16px);
    font-size: 0;
    .top-l{
      width: 70%;
      height: calculateRem(60px);
      line-height: calculateRem(60px);
      float: left;
      color: #2C3338;
      font-size: calculateRem(17px);
      @include ell;
      font-weight: bold;
    }
    .top-r{
      width: 30%;
      height: calculateRem(60px);
      line-height: calculateRem(60px);
      float: left;
      text-align: right;
      >a{
        font-size: calculateRem(14px);
        color: #2C3338;
        &:after{
          content: '';
          width: calculateRem(11px);
          height: calculateRem(11px);
          display: inline-block;
          background: url(../assets/images/goto14@2x.png) no-repeat;
          background-size: 100%;
          margin-left: calculateRem(8px);
        }
      }
    }
  }
  
  .main{


  .left-nav{
    width: 29%;
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: 0;
    top: calculateRem(71px);
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid #f3f1f1;
    background: white;
    .nav{
      width: 100%;
      box-sizing: border-box;
      height: calculateRem(63px);
      line-height: calculateRem(42px);
      border-bottom: 1px solid #f3f1f1;
      padding: calculateRem(10px) calculateRem(16px);
      font-size: calculateRem(15px);
      color: #2C3338;
      overflow: hidden;
      &:active{
        background: #fcfcfc;
      }

      .nav-inner{
        width: 100%;
        max-height: calculateRem(42px);
        line-height: calculateRem(21px);
          display: inline-block;
          vertical-align: middle;
          overflow: hidden;
        >span{
          width: 100%;
          display: inline-block;
          @include mulell(2);
          overflow: hidden;
        }
      }
    }
    .active{
      color: #E62622;
    }
  }
  .right-container{
    width: 71%;
    position: fixed;
    z-index: 1;
    right: 0;
    bottom: 0;
    top: calculateRem(71px);
    overflow-y: auto;
    background: white;
    .p-wrap{
      width: 100%;
      height: auto;
      .p-box{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: calculateRem(19px) calculateRem(14px) calculateRem(7px) calculateRem(22px);
        &:active{
          background: #fcfcfc;
        };
        .p-top{
          width: 100%;
          height: calculateRem(52px);
          .pic{
            width: calculateRem(48px);
            height: calculateRem(48px);
            border-radius: 50%;
            box-sizing: border-box;
            overflow: hidden;
            margin-right: calculateRem(9px);

            >img{
              width: 100%;
              height: 100%;

            }

          }
          .infos{
            max-width: 72%;
            .name_btn{
              width: 100%;
              height: calculateRem(26px);
              line-height: calculateRem(26px);
              margin-top: calculateRem(4px);
              .name{
                font-size: calculateRem(18px);
                color: #333;
                font-weight: bold;
                width: 55%;
                height: calculateRem(26px);
                float: left;
                @include ell;

              }
              .select{
                width: 45%;
                height: calculateRem(26px);
                float: left;
                text-align: right;
                .btn{
                  display: inline-block;
                  width: calculateRem(56px);
                  height: calculateRem(22px);
                  line-height: calculateRem(22px);
                  border-radius: 2px;
                  background: #EB1F10;
                  color: white;
                  font-size: calculateRem(14px);
                  text-align: center;
                }

              }

            }
            .book{
              width: 100%;
              height: calculateRem(18px);
              color: #4B4B4B;
              font-size: calculateRem(12px);
              @include ell;
            }

          }
        }
        .des{
          color: #4B4B4B;
          font-size: calculateRem(13px);
          line-height: calculateRem(19px);
          max-height: calculateRem(40px);
          @include mulell(2);
          overflow: hidden;
        }
      }
    }
    .empty{
      text-align: center;
      overflow: hidden;
      >img{
        width: calculateRem(60px);
        height: calculateRem(60px);
        margin-top: calculateRem(68px);
      }
      >p{
        color: #5C656B;
        margin-top: calculateRem(14px);
        font-size: calculateRem(15px);
      }
    }
  }

  }

  .none{
    background: white;
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    top: calculateRem(71px);
    text-align: center;
    >img{
      width: calculateRem(60px);
      height: calculateRem(60px);
      margin-top: calculateRem(71px);
    }
    >p{
      margin-top: calculateRem(6px);
      line-height: calculateRem(22px);
      color: #5C656B;
      font-size: calculateRem(15px);
    }


  }


}
</style>
